<template>
  <div>
    <!-- <div class="closeBtn">
      <span class="iconfont iconicon-test"></span>
    </div>-->
    <!-- 头部nav -->
    <Topnav titleTxt="登录"></Topnav>

    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <form action class="form">
      <autoInput
        inputtype="text"
        iplaceholder="用户名/手机号"
        rule="^.{3,10}$"
        errmsg="请输入正确用户名"
        @sendValue="getuserName"
      ></autoInput>
      <autoInput
        inputtype="password"
        iplaceholder="密码"
        rule="^.{3,10}"
        errmsg="请输入正确的密码格式，不少于6位"
        @sendValue="getuserPwd"
      ></autoInput>
      <autoBtn btntext="登录" @ClickBtn="handle"></autoBtn>
      <router-view></router-view>
    </form>
    <div class="jumplinks">
      <div class="modifyPwd">忘记密码&gt;</div>
      <router-link to="/register" class="zhuce">立即注册&gt;</router-link>
    </div>
  </div>
</template>

<!-- 在这里映入输入框组件 -->
<script>
//   导入输入框组件，并在这个组件里面注册
import autoInput from "@/components/AutoInput.vue";
// 引入按钮框组件
import autoBtn from "@/components/AutoBtn.vue";
import Topnav from "@/components/TopNav.vue";
export default {
  components: {
    autoInput,
    autoBtn,
    Topnav
  },
  data() {
    return {
      username: "",
      userpwd: ""
    };
  },
  methods: {
    handle() {
      //这里进行验证用户名和密码其中一个为空，不可以发送请求，而应该弹出提示框
      if (this.username === "" || this.userpwd === "") {
        this.$dialog.alert({
          message: "用户名或密码不能为空"
        });
        return;
      }

      //axios的使用方式
      this.$axios({
        //测试http://liangwei.tech:3000/post
        url: "/login",
        method: "POST",
        data: {
          username: this.username,
          password: this.userpwd
        }
      })
        .then(res => {
          //将data解构出来
          console.log("res测试", res);
          const { statusCode, message } = res.data;
          if (!statusCode) {
            //登录成功
            this.$dialog.alert({
              message
            });
            //将token和id进行本地存储
            const { data } = res.data;
            localStorage.setItem("token", data.token);
            localStorage.setItem("id", data.user.id);
            //登录成功跳转到首页
            this.$router.push({
              path: "/"
            });
          }
        })
        .catch(err => {
          //这里是错误处理
          //通过log打印 不出来，此时我们要使用dir来查看err的数据结构
          // console.dir(err);
          // const { statusCode, message } = err.response.data;
          //第一种提示 弹窗
          // this.$dialog.alert({
          //   message: "系统错误"
          // });

          //第二种提示  轻提示
          this.$toast.fail("系统错误");
        });
    },
    getuserName(username) {
      this.username = username;
      console.log("这是获取用户名");
    },
    getuserPwd(userpwd) {
      this.userpwd = userpwd;
      console.log("这是获取密码");
    }
  }
};
</script>
<style lang="less" scoped>
.closeBtn {
  padding: 24px;

  span {
    font-size: 7.5vw;
  }
}
.logo {
  text-align: center;
  span {
    font-size: 35vw;
    color: #ea2e03;
  }
}
.form {
  text-align: center;
}
.mask {
  border-radius: 6%;
  padding-top: 5.556vw;
  color: green;
}
.jumplinks {
  display: flex;
  justify-content: space-around;
  width: 69.444vw;
  margin: 15px auto;
  font-size: 14px;
  .modifyPwd {
    color: #666;
  }
  .zhuce {
    color: #d55a31;
  }
}
</style>
